<template>
  <div class="menu">
    <!-- <el-menu default-active="/"
     class="el-menu-vertical-demo" :collapse="isCollapse" router>
      <el-menu-item index="/" @click="clickIndex">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu :index="menu.index" v-for="(menu,index) in menuList" :key="index">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span slot="title">{{menu.title}}</span>
        </template>
        <el-menu-item @click="addTab({title:itemMenu.title,index:itemMenu.index,closable:true,activeClass:true})" :index="itemMenu.index" v-for="(itemMenu,itemIndex) in menu.children" :key="itemIndex">
          <template slot="title">
          <i :class="itemMenu.icon"></i>
          <span slot="title">{{itemMenu.title}}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu> -->
    <el-menu default-active="/"
     class="el-menu-vertical-demo" :collapse="isCollapse" router>
      <el-menu-item index="/" @click="clickIndex">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <!-- 一级菜单-->
      <el-submenu :index="menu.index" v-for="(menu,index) in menuList" :key="index">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span slot="title">{{menu.name}}</span>
        </template>
        <!-- 二级菜单-->
        <el-menu-item @click="addTab({title:itemMenu.name,index:itemMenu.index,closable:true,activeClass:true})" :index="itemMenu.index" v-for="(itemMenu,itemIndex) in menu.children" :key="itemIndex">
          <template slot="title">
          <i :class="itemMenu.icon"></i>
          <span slot="title">{{itemMenu.name}}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import {getRequest} from '../util/http'
export default {
  name: 'Menu',
  props: {
    // 默认菜单展开
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      menuList: []
      // menuList: [
      //   {title: '系统管理', index: '1', icon: 'el-icon-setting', children: [{title: '系统设置', index: '/system/setting', icon: 'el-icon-setting', children: []}]},
      //   {title: '用户管理', index: '2', icon: 'el-icon-menu', children: [{title: '用户列表', index: '/user/list', icon: 'el-icon-menu', children: []}]},
      //   {title: '商品管理', index: '3', icon: 'el-icon-goods', children: [{title: '商品列表', index: '/commodity/list', icon: 'el-icon-goods', children: []}]}]
    }
  },
  created () {
    this.getResource()
  },
  methods: {
    // 添加tab函数
    addTab (option) {
      // 先将选中样式class设置为false
      for (let item of this.$store.state.options) {
        item.activeClass = false
      }
      // 判断是否添加新的tab
      let flag = true
      for (let item of this.$store.state.options) {
        if (item.index === option.index) {
          item.activeClass = true
          flag = !flag
          break
        }
      }
      if (flag) {
        this.$store.commit('addTab', option)
      }
    },
    // 点击首页菜单
    clickIndex () {
      // 先将选中样式class设置为false
      for (let item of this.$store.state.options) {
        item.activeClass = false
      }
      this.$store.state.options[0].activeClass = true
    },
    async getResource () {
      let res = await getRequest('/sysRequestPath/getResource')
      this.menuList = res.data
    }
  }
}
</script>

<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 20rem;
    min-height: 40rem;
  }
  /* .my-collapse{
    width: 100%;
    border-bottom: 0.2rem solid #ff7b00;
  }
  /deep/ .el-radio-button{
    width: 50%;
  }
  /deep/ .el-radio-button__inner{
    width: 100%;
    padding: 1.2rem 3rem;
  } */
</style>
